<template>
	<view>

		<form v-if="show==1" @submit="formSubmit">
			<view class="inputbox">
				<view class="inputbox1">名称</view>
				<view class="inputbox2">
					<input type="text" name='name' placeholder="请输入">
				</view>
			</view>

			<view class="inputbox">
				<view class="inputbox1">面积</view>
				<view class="inputbox2">
					<input type="text" name='ares' placeholder="请输入">
				</view>
			</view>

			<view class="inputbox">
				<view class="inputbox1">单位</view>
				<view class="inputbox3">
					
					<radio-group name="ares">
						<label>
							<radio class='ares_status' color="#08b059" checked="ture"  value="1" ></radio>平方米
						</label>
							
						<label>
								<radio class='ares_status' color="#08b059" value="2" ></radio>亩
						</label>
					</radio-group>
				
				</view>
			</view>
			
			<view class="inputbox">
				<view class="inputbox1">价格</view>
				<view class="inputbox2">
					<input type="text" name='money' placeholder="请输入">
				</view>
			</view>
			
			<view class="inputbox">
				<view class="inputbox1">土地分类</view>
				<view class="inputbox3">
					<picker name='types_id' @change="bindPickerChange"  range-key="name" :range="types">
						{{types_name?types_name:'请选择'}}
					</picker>
				</view>
			</view>
			
			<view class="inputbox">
				<view class="inputbox1">转让费</view>
				<view class="inputbox2">
					<input type="text" name='makeover' placeholder="请输入">
				</view>
			</view>
			
			<view class="inputbox">
				<view class="inputbox1">时长 </view>
				<view class="inputbox3">
					
					<radio-group name="duration">
						<label>
							<radio class='ares_status' color="#08b059" checked="ture"  value="1" ></radio>短租
						</label>
							
						<label>
								<radio class='ares_status' color="#08b059" value="2" ></radio> 长租
						</label>
					</radio-group>
				
				</view>
			</view>
			
			<view class="inputbox">
				<view class="inputbox1">地主姓名</view>
				<view class="inputbox2">
					<input type="text" name='landlord' placeholder="请输入">
				</view>
			</view>
			
			<view class="inputbox">
				<view class="inputbox1">地主电话</view>
				<view class="inputbox2">
					<input type="number" name='landlordmobile' placeholder="请输入">
				</view>
			</view>
			
			<view class="inputbox">
				<view class="inputbox1">地主性质</view>
				<view class="inputbox3">
					
					<radio-group name="property">
						<label>
							<radio class='ares_status' color="#08b059" checked="ture"  value="1" ></radio>个人
						</label>
							
						<label>
								<radio class='ares_status' color="#08b059" value="2" ></radio> 企业
						</label>
					</radio-group>
				
				</view>
			</view>
			
			
			<view class="inputbox">
				<view class="inputbox1">用途</view>
				<view class="inputbox2">
					<input type="text" name='extensive' placeholder="请输入">
				</view>
			</view>
			
			<view class="inputbox">
				<view class="inputbox1">流转年限</view>
				<view class="inputbox2">
					<input type="text" name='year' placeholder="请输入">
				</view>
			</view>
			
			<view class="inputbox">
				<view class="inputbox1">类型</view>
				<view class="inputbox3">
					
					<radio-group name="utypes">
						<label>
							<radio class='ares_status' color="#08b059" checked="ture"  value="1" ></radio>出租
						</label>
							
						<label>
								<radio class='ares_status' color="#08b059" value="2" ></radio> 转让
						</label>
						<label>
								<radio class='ares_status' color="#08b059" value="3" ></radio> 合作
						</label>
					</radio-group>
				
				</view>
			</view>
			
			<view class="inputbox">
				<view class="inputbox1">标签</view>
				<view class="inputbox3">
					<picker name='icons_id' @change="bindPickerChangeicon"  range-key="name" :range="icons">
						{{icons_name?icons_name:'请选择'}}
					</picker>
				</view>
			</view>
			
			<view class="inputbox">
				<view class="inputbox1">是否核实</view>
				<view class="inputbox3">
					
					<radio-group name="ares_status">
						<label>
							<radio class='ares_status' color="#08b059" checked="ture"  value="1" ></radio>核实
						</label>
							
						<label>
								<radio class='ares_status' color="#08b059" value="2" ></radio> 未核实
						</label>
					</radio-group>
				
				</view>
			</view>
			
			<view class="inputbox">
				<view class="inputbox1">区域</view>
				<view class="inputbox3">
					<picker name='icons_id' @change="bindPickerChangeadd"  range-key="name" :range="addressarr">
						{{address_name?address_name:'请选择'}}
					</picker>
				</view>
			</view>
			
			<view class="inputbox">
				<view class="inputbox1">详细地址</view>
				<view class="inputbox2">
					<input type="text" name='address' placeholder="请输入">
				</view>
			</view>
			
			
			<view class="titlebox">
				简介
			</view>


			<view class="textbox">
				<textarea name="desc" placeholder="请输入" id="" cols="30" rows="10"></textarea>
			</view>

			<view class="titlebox">
				封面图 <text> (750*750) </text>
			</view>

			<view class="imagebox">
				<image class="imageboxup" @tap="beforeUpload" :src="[img?img:'/static/image/noimg.png']"></image>
			</view>

			<view class="titlebox">
				轮播图 <text> (长按删除图片) </text>
			</view>

			<view class="imageboxs">
				<image class="imageboxup" :data-i=index v-for="(item,index) in imgs" @longtap="deleteimg" :src="item">
				</image>

				<image class="imageboxup" @tap="addimages" src="/static/image/noimg.png"></image>
			</view>

			<button form-type="submit" class="fabu" v-if="btn==1">发布土地</button>

		</form>
			
			
			<view class="textshow"  v-if="show==0">
				<view class="ares_status1">亲爱的用户们：</view>
				<view class="ares_status2">
					大家好！我们非常高兴地宣布，经过精心研发与测试，我们的小程序上线了。
					这款小程序将为大家带来前所未有的便捷与乐趣，我们诚邀各位用户共同体验，感受科技的魅力！
					办桶沟致力于为用户提供丰富的信息咨询，满足您在工作、生活、娱乐等多方面的需求。我们深入挖掘用户需求，力求打造一款既实用又有趣的小程序。同时，我们也将不断优化产品性能，确保用户在使用过程中能够享受到流畅、稳定的体验。
					我们诚挚地邀请各位用户关注并体验小程序。
					您可以通过扫描以下二维码或搜索半桶沟进入小程序，开始您的全新体验之旅。
				</view>
				
			</view>

		<view style="height: 10rpx;"></view>
	</view>
</template>

<script>
	import {
		curl
	} from 'common/api.js';
	import {
		baseUrl
	} from "common/config.js";
	export default {
		data() {
			return {
				show:0,
				img: '',
				imgs: [],
				types:[],
				types_id:'',
				types_name:'',
				icons:[],
				icons_id:'',
				icons_name:'',
				addressarr:[],
				address_name:'',
				address_id:'',
				btn:1
			}
		},
		onShareAppMessage(res) {
			
		},
		onLoad() {
			var that=this;
			
			curl('index/getmenus', {}).then((res) => {
				that.types=res.data;
			});
			
			curl('index/geticons', {}).then((res) => {
				that.icons=res.data;
			});
			
			curl('index/getaddress', {}).then((res) => {
				that.addressarr=res.data;
			});
			
		},
		onShow() {
			var that=this;
			curl('index/getshow', {}).then((res) => {
				that.show=res.data.show;
			});
		},
		methods: {

			formSubmit(e) {

				
				var that=this;
				that.btn=0;
				
				var images=this.imgs;
				var image=this.img;
				
				var info=e.detail.value;
				info.image=image;
				info.images=images;
				info.address_id=this.address_id;
				info.icons_id=this.icons_id;
				info.types_id=this.types_id;
				
				curl('member/addlands', info).then((res) => {
					
					if (res.code==0) {
						
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
						that.btn=1;
					} else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
						
						setTimeout(function(){
							uni.reLaunch({
								url:"/pages/mygood/index"
							})
						},1200)
						
					
						
					}	
					
				});
				
			},
			bindPickerChangeadd(ret){
				console.log(ret)
				var that=this;
				var types=this.addressarr;
				
				var i=ret.detail.value;
				this.address_id=types[i].id;
				this.address_name=types[i].name;
			},

			bindPickerChangeicon(ret){
				console.log(ret)
				var that=this;
				var types=this.icons;
				var i=ret.detail.value;
				
				this.icons_id=types[i].id;
				this.icons_name=types[i].name;
			},
			bindPickerChange(ret){
				console.log(ret)
				var that=this;
				var types=this.types;
				var i=ret.detail.value;
				
				this.types_id=types[i].id;
				this.types_name=types[i].name;
			},

			deleteimg(ret) {
				console.log(ret);
				var i = ret.currentTarget.dataset.i;
				var that = this;
				var imgs = this.imgs;
				var news = [];
				imgs.forEach(function(item, index) {

					if (index != i) {
						news.push(item)
					}
				})

				that.imgs = news;
			},
			addimages() {
				var that = this;
				var token = uni.getStorageSync('token');

				var imgs = this.imgs;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						var ss = res.tempFilePaths;
						that.imgurl = ss[0];
						uni.uploadFile({
							url: `${baseUrl}` + 'common/upload',
							filePath: ss[0], // 本地上传完成后的路径
							name: 'file',
							formData: {},
							header: {
								"token": token
							},
							success: function(uploadFileRes) {
								var ret = JSON.parse(uploadFileRes.data);

								console.log(ret.data.fullurl)
								imgs.push(ret.data.fullurl);

								that.imgs = imgs;
							}
						});

					},
					fail:function(ret){
						console.log(ret)
					}
				});
			},

			// 上传图片
			beforeUpload(types) {
				var that = this;
				var token = uni.getStorageSync('token');
				console.log(types);
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						var ss = res.tempFilePaths;
						that.imgurl = ss[0];
						uni.uploadFile({
							url: `${baseUrl}` + 'common/upload',
							filePath: ss[0], // 本地上传完成后的路径
							name: 'file',
							formData: {},
							header: {
								"token": token
							},
							success: function(uploadFileRes) {
								var ret = JSON.parse(uploadFileRes.data);

								console.log(ret.data.fullurl)
								that.img = ret.data.fullurl
							}
						});

					}
				});
			},

		}
	}
</script>

<style>
	
	.ares_status2{
		line-height: 40rpx;font-size: 28rpx;color: #333333;
	}
	.ares_status1{
		line-height: 70rpx;font-size: 32rpx;color: #333333;
	}
	.textshow{
		width: 710rpx;margin: auto;
	}
	.imageboxs {
		width: 700rpx;
		height: auto;
		margin: auto;
		display: flex;
		flex-wrap: wrap;
	}

	.imageboxup {
		width: 162rpx;
		height: 161rpx;
		margin-right: 12rpx;
		margin-bottom: 15rpx;
	}

	.imagebox {
		width: 700rpx;
		height: 210rpx;
		margin: auto;
		display: flex;
		align-items: center;
	}

	.textbox>textarea {
		padding: 10rpx;
		width: 680rpx;
		height: 180rpx;
	}

	.textbox {
		width: 700rpx;
		height: 200rpx;
		margin: auto;
		background: #fafafa;
		border-radius: 10rpx;
		border: 1px solid #fafafa;
	}

	.titlebox>text {
		color: #666666;
		font-size: 26rpx;
		margin-left: 10rpx;
	}

	.titlebox {
		width: 700rpx;
		margin: auto;
		height: 90rpx;
		line-height: 90rpx;
		font-size: 30rpx;
		color: #000000;
	}

	.inputbox3{
		width: 500rpx;
		display: flex;align-items: center;justify-content: flex-end;
	}
	.ares_status{
		transform:scale(0.6);
		
	}

	.inputbox2 {
		width: 500rpx;
		text-align: right;
		font-size: 28rpx;
		font-weight: 500;
		color: #333333;
	}

	.inputbox1 {
		width: 200rpx;
		height: 40rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: #333333;
	}

	.inputbox {
		width: 700rpx;
		height: 100rpx;
		margin: auto;
		border-bottom: 1px solid #ececec;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.fabu {
		width: 700rpx;
		height: 70rpx;
		background: #08b059;
		text-align: center;
		line-height: 70rpx;
		margin: 20rpx auto;
		border-radius: 70rpx;
		color: #ffffff;
	}
</style>